Angular 重磅回归
作者:Loraine Lawson
译者:InfoQ — 张乐
Angular 是一个由 Google 和社区共同领导的开源 Web 应用框架。在设计上,Angular 是 AngularJS 的完全重写,由 AngularJS 的同一个开发团队负责。
去年 1 月,Angular 团队宣布对 AngularJS 的长期支持正式停止,团队已经将全部精力放到了开发新的功能上。该团队于今年 5 月正式发布了 Angular v16 ,并打算在今年 11 月发布 Angular v17 版本。目前他们推出了将要在 v17 中包含的一系列功能,比如控制流。
关注 Angular 的前端开发者认为,Angular 正在复兴。Progress 高级开发大使 Alyssa Nicoll 也想向大家传达这样一个信息:是时候重新审视这个 JavaScript 框架了。
Nicoll 是 Angular Air 播客的主持人,她的职责包括与 Google Angular 团队共事。Nicoll 表示,自 2015 年以来,基于 TypeScript 的框架发生了显著的变化,特性不断扩展。就在那个时候,Google 重写了 AngularJS,创建了一个全新的框架 Angular 2+。然后在很长的一段时间里,Angular 团队都在重写名为 Ivy 的基础视图引擎。她说,现在 lvy 已完成,Angular 团队发布了之前推迟的升级和新特性。因此,Angular 变得对所有用户都更加友好。
Nicoll 说:“这就是我将它与文艺复兴联系起来的原因,因为它不仅带来了活力、新鲜感和创造力,而且还大幅优化了开发体验。人文主义是文艺复兴运动的一个重要组成部分,涉及人类成长和人类潜力。围绕 Angular 的这一运动关注的也是开发体验以及人们使用 Angular 的潜力,并使其对所有用户都更加友好。”
这可能不够有说服力。Stack Overflow 2023 年的调查数据显示,框架使用率总体上呈下降趋势,特别是过去一年,Angular 的使用量下降了 24%。同时,Svelte 和 Deno 的使用率则分别增长了约 62% 和 61%。Angular 控制了约 18% 的框架“市场”,而 React 仍然以接近 41% 的使用率领先。
之所以出现上述变化,其中一部分原因就是使用率下降。
Nicoll 说:“Angular 团队……非常关注开发体验,因为我们正在设法吸引新的开发人员,因为如果没有大量新的开发人员采用,我们的社区将会慢慢萎缩。”
Nicoll 说,该框架的改进主要体现在以下三个方面。我们有必要重新对它进行审视。
在 Angular 中,最小的代码块不是组件,而是模块。在众多 JavaScript 框架中,只有它是这样的。Nicoll 解释说,模块是封装器,其中包含依赖关系、共享功能甚至路由等内容。
移除模块可能会让习惯了模块的“Angularites”感到困扰,但这将使其他开发人员更容易理解框架。
她说:“即使是长期使用 Angular 的人,一旦停止使用模块,也会看到框架未来的潜力。这使得其他 JavaScript 开发人员使用我们的框架变得更容易。如果需要快速加入 Angular 项目——因为有很多团队有 Angular 项目、React 项目或 Vue 项目,人们就更容易根据现有的经验来理解我们的框架,因为基本部件看起来一样。”
对于经验丰富的 Angular 开发人员,Nicoll 建议不要在生产应用中采用“淘汰和替换”的方法。
她说:“你可以删除应用程序模块,这是启动整个应用程序的基础模块。但我不推荐这样做,因为我认为社区本身还不支持这一点。如果你这样做,你的许多依赖项都可能会出问题,因为它们会找不到应用程序,这是因为它们依赖这个基础模块来获取应用程序的信息,以及如何与之协同。”
她补充说,支持 Angular 应用程序基础结构的工具和依赖项仍在发展,只是还没有达到这种程度。
“我想说,一定要从组件中删除模块,或者在开发新组件或管道时不再使用它们。但是,在生产环境中,除非你非常确定所有的依赖项以及它们与应用程序的集成方式,否则就先等等,暂时保留基础模块。”
Nicoll 表示,Angular 正在添加信号,这为它的“内置响应性原语”。信号将使开发人员能够轻松管理和响应应用程序中的更改。她认为,这有可能彻底改变开发人员对响应式编程的处理方式,使其更容易被更广泛的开发人员所接受。
“React 及其他许多框架,甚至.Net 都有信号的概念。”Nicoll 说,“在某种程度上,是 Angular 正在追赶,使自己变得更好。”
信号是一个对象,它有值,而且我们可以观察其变化。它们类似于 React 的状态,但是根据 Google Bard 的说法,信号主要有以下几个优势:
信号可以在组件之间共享,而不必将它们作为 props 向下传递。
信号仅在需要时更新,这可以提高大型应用程序的性能。
信号可用于创建复杂的状态管理模式,例如 Redux 和 MobX。
目前,Angular 提供了可观察对象以实现响应性,并将其与 OnPush 相结合。虽然有效,但也有代价。
她说:“使用可观察对象和 OnPush 的代价可归结为 zone.js——很多 Angular 开发者提到它时都会做出呕吐的表情或者胸前画十字——和变化检测。像信号这样内置的反应原语就没有这种代价。”
她补充说,就目前而言,未来在 Angular 中不会出现这种变化检测,这将缩短加载时间,提升应用程序性能,甚至提升开发速度。
控制流
在外媒分享这个主题时,Nicoll 解释说,新提议的控制流语法“很大程度上受到 Svelte 的控制流以及 Mustache 模板语言的启发”。她说:“想想内联的 if、else、switch 和 defer。”
控制流允许在模板中使用 if 和 else 语句,方便开发人员加载东西,甚或是延迟加载(例如图像),直到用户需要或执行到这块时。
她说:“所有这些都可以改善 Angular 应用程序的用户体验。所有这一切,我提到的每一件事,都是可选的;它们不会强迫你改变使用 Angular 的方式,不会带来任何破坏性。我认为,这是他们会继续遵守的一项对于 Angular 社区的重要承诺。”
参考链接:
https://blog.angular.io/meet-angulars-new-control-flow-a02c6eee7843
https://blog.angular.io/angular-v16-is-here-4d7a28ec680d
https://thenewstack.io/the-angular-renaissance-why-frontend-devs-should-revisit-it/